<script lang="tsx">
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { Component } from 'vue-property-decorator'
import FileUpload from 'components/common/file-upload.vue'
@Component({
    components: {
        FileUpload
    },
    methods: {
        ...mapMutations(process.env.APP_SCOPE_NAME, ['setPageTitle']),
        getFilter () {
            this.http.getFilter({}).then(res => {
                this.tableHeader = res.header || []
                this.tableData = res.data || []
            }).catch(() => {

            })
        },
        downloadConfig () {
            this.http.downloadConfig({}).then(res => {
                this.download(res)
            }).catch(() => {

            })
        },
        importConfig (file) {
            let formData = new FormData()
            formData.append('file', file)
            this.http.importConfig(formData).then(res => {
                this.showNotify({ message: '导入成功', color: 'positive' })
            }).catch(() => {
                
            })
        }
    }
})
export default class Layout extends Vue {
    public tableHeader = []
    public tableData = []

    created () {
        this.setPageTitle('日志配置')
        this.getFilter()
    }

    render (): JSX.Element {
        return (
            <div class="q-pa-sm">
                <div class="row justify-end q-mb-sm">
                    <file-upload size="small" label="导入" class="q-mr-sm" on-upload={this.importConfig}></file-upload>
                    <el-button type="primary" size="small" on-click={this.downloadConfig}>导出</el-button>
                </div>
                <mg-easy-table node-label="label" node-key="prop" header-data={this.tableHeader} table-data={this.tableData}></mg-easy-table>
            </div>
        )
    }
}
</script>
